<template>
  <div class="page flex-col">
    <div class="wrap1 flex-col">
      <div class="layer1 flex-col"><span class="txt1">英文+数字</span></div>
      <div class="layer2 flex-row">
        <span class="word1">Roboto</span>
        <span class="word2">AbCdEfGhIjKLm…</span>
      </div>
      <div class="layer3 flex-row">
        <span class="txt2">Roboto</span>
        <span class="word3">AbCdEfGhIjKLm…</span>
      </div>
      <div class="layer4 flex-row">
        <span class="info1">Roboto</span>
        <span class="info2">AbCdEfGhIjKLm…</span>
      </div>
      <div class="layer5 flex-row">
        <span class="word4">Roboto</span>
        <span class="word5">AbCdEfGhIjKLm…</span>
      </div>
      <div class="layer6 flex-row">
        <span class="info3">D-DIN</span>
        <span class="word6">1234567890</span>
      </div>
      <div class="layer7 flex-row">
        <span class="word7">D-DIN</span>
        <span class="word8">1234567890</span>
      </div>
      <div class="layer8 flex-row">
        <span class="word9">Poppins</span>
        <span class="txt3">1234567890…</span>
      </div>
      <div class="layer9 flex-row">
        <span class="word10">Poppins</span>
        <span class="info4">1234567890…</span>
      </div>
      <div class="layer10 flex-row">
        <span class="word11">Poppins</span>
        <span class="word12">1234567890…</span>
      </div>
      <div class="layer11 flex-row">
        <span class="word13">Poppins</span>
        <span class="word14">1234567890…</span>
      </div>
      <div class="layer12 flex-row">
        <span class="word15">Poppins</span>
        <span class="txt4">1234567890…</span>
      </div>
      <div class="layer13 flex-row">
        <span class="word16">Poppins</span>
        <span class="info5">1234567890…</span>
      </div>
      <div class="layer14 flex-row">
        <span class="info6">Poppins</span>
        <span class="word17">1234567890…</span>
      </div>
      <div class="layer15 flex-row">
        <span class="info7">Poppins</span>
        <span class="word18">1234567890…</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {}
    };
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.page {
  z-index: 1;
  position: relative;
  width: 750px;
  height: 1122px;
  background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
  justify-content: flex-start;
  padding-top: 0;
  .wrap1 {
    z-index: auto;
    width: 750px;
    height: 1072px;
    .layer1 {
      z-index: 30;
      height: 80px;
      background-color: rgba(233, 240, 255, 1);
      width: 750px;
      justify-content: flex-end;
      padding-bottom: 17px;
      .txt1 {
        z-index: 31;
        width: 750px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: PingFangSC-Semibold;
        white-space: nowrap;
        line-height: 40px;
        text-align: center;
      }
    }
    .layer2 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 44px 0 0 40px;
      .word1 {
        z-index: 2;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Roboto-Thin;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word2 {
        z-index: 3;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Roboto-Thin;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer3 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 29px 0 0 40px;
      .txt2 {
        z-index: 4;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Roboto-Regular;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word3 {
        z-index: 5;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Roboto-Regular;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer4 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .info1 {
        z-index: 6;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Roboto-Medium;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .info2 {
        z-index: 7;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Roboto-Medium;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer5 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .word4 {
        z-index: 8;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Roboto-Bold;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word5 {
        z-index: 9;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Roboto-Bold;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer6 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .info3 {
        z-index: 10;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: D-DIN;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word6 {
        z-index: 11;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: D-DIN;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer7 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .word7 {
        z-index: 12;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: D-DIN-Bold;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word8 {
        z-index: 13;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: D-DIN-Bold;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer8 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 35px 0 0 40px;
      .word9 {
        z-index: 14;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins-Light;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .txt3 {
        z-index: 22;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins-Light;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer9 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .word10 {
        z-index: 15;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins-Light;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .info4 {
        z-index: 23;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins-Light;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer10 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .word11 {
        z-index: 16;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins-Medium;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word12 {
        z-index: 24;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins-Medium;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer11 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .word13 {
        z-index: 17;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins-SemiBold;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word14 {
        z-index: 25;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins-SemiBold;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer12 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .word15 {
        z-index: 19;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .txt4 {
        z-index: 27;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer13 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 30px 0 0 40px;
      .word16 {
        z-index: 21;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .info5 {
        z-index: 29;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Poppins;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer14 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 25px 0 0 40px;
      .info6 {
        z-index: 18;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Gotham-XLight;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word17 {
        z-index: 26;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Gotham-XLight;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
    .layer15 {
      z-index: auto;
      width: 670px;
      height: 40px;
      justify-content: space-between;
      margin: 29px 0 0 40px;
      .info7 {
        z-index: 20;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Gotham-Bold;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
      .word18 {
        z-index: 28;
        width: 335px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 40px;
        font-family: Gotham-Bold;
        white-space: nowrap;
        line-height: 40px;
        text-align: left;
      }
    }
  }
}

</style>
